<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">采购管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/add_supplier' }">
          <div class="div2">供应商列表</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 -->

    <!-- 查询客户列表 -->
    <el-collapse-transition>
      <div class="query" v-show="!show3">
        <div class="header">
          <span>数据查询</span>
          <p @click="show3 = true">收起</p>
        </div>
        <div class="polling">
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="供应商">
              <el-input
                placeholder="请输入供应商姓名/电话"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>

            <el-form-item label="商品名称">
              <el-input
                placeholder="请输入商品名称"
                v-model="queryForm.goodName"
              ></el-input>
            </el-form-item>

            <div class="selectDate">
              <span>创建时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="queryForm.date"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                >
                </el-date-picker>
              </div>
            </div>

            <el-form-item label="创建人">
              <el-select
                v-model="queryForm.founder"
                placeholder="请选择创建人"
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in upplier"
                  :key="items.id"
                  :label="items.value"
                  :value="items.label"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="供应地址">
              <el-input
                placeholder="请输入供应商地址"
                v-model="queryForm.address"
              ></el-input>
            </el-form-item>

            <el-form-item label="选择品牌">
              <el-select
                v-model="queryForm.brand"
                placeholder="请选择产品品牌"
                clearable
                default-first-option
              >
                <el-option
                  v-for="items in brandselect"
                  :key="items.id"
                  :label="items.name"
                  :value="items.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-select
                v-model="queryForm.category"
                placeholder="请选择商品类型"
                clearable
                default-first-option
              >
                <el-option label="商品" :value="1"></el-option>
                <el-option label="赠品" :value="2"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                size="mini"
                @click="searchEvent()"
                v-on:keyup.enter="searchEvent"
                >搜索</el-button
              >
              <el-button plain size="mini" @click="reset">重置</el-button>
              <!-- <el-button type="primary">导出数据</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-collapse-transition>
    <!-- 查询客户列表 -->

    <div class="btnBox">
      <div class="btns">
        <el-button
          @click="addFalse = true"
          type="primary"
          size="mini"
          v-if="parArray.indexOf('addsupplierCode') != -1"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_add.png"
            />添加供应商
          </span></el-button
        >

        <el-button
          @click="deleteImg(0)"
          type="primary"
          size="mini"
          v-if="parArray.indexOf('delectSupplierCode') != -1"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_shanchu.png"
            />删 除
          </span></el-button
        >
        <el-button
          @click="exports"
          v-if="parArray.indexOf('exportCode') != -1"
          type="primary"
          size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_daochu.png"
            />导 出
          </span></el-button
        >

        <el-button
          @click="tpPrintJS"
          v-if="parArray.indexOf('rintingCode') != -1"
          type="primary"
          size="mini"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/dayin.png"
            />打 印
          </span></el-button
        >
        <el-button
          v-if="parArray.indexOf('addCg') != -1"
          type="primary"
          size="mini"
          @click="addCg"
          ><span style="display: flex; align-items: center">
            <img
              style="width: 14px; height: 14px; margin-right: 5px"
              src="../../../assets/icon/icon_caigou.png"
            />新增采购单
          </span></el-button
        >
      </div>
      <p class="shows" @click="show3 = false" v-show="show3">搜索展开</p>
    </div>

    <div class="table">
      <el-table
        :data="tableData.list"
        type="index"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="创建时间" width="100px">
          <template slot-scope="scope">
            <p>{{ $moment(scope.row.createdTime) }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdName"
          label="创建人"
          width="120px;"
        ></el-table-column>
        <el-table-column prop="supplierName" label="供应商"></el-table-column>
        <el-table-column
          prop="supplierPhone"
          label="电话"
          show-overflow-tooltip
          width="120px;"
        ></el-table-column>
        <el-table-column
          prop="supplierAddress"
          label="地址"
          show-overflow-tooltip
          min-width="120px;"
        ></el-table-column>
        <el-table-column
          prop="prodName"
          label="商品信息"
          show-overflow-tooltip
          width="200"
        ></el-table-column>
        <el-table-column label="商品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.prodType == 1">商品</span>
            <span v-else>赠品</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="prodBrandName"
          label="商品品牌"
        ></el-table-column>
        <el-table-column prop="prodPrice" label="采购单价"></el-table-column>
        <el-table-column
          prop="prodSpecificationName"
          label="商品规格"
        ></el-table-column>
        <el-table-column label="图片">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="
                scope.row.supplierImage.split(',')[0] ? '查看更多' : '没有图片'
              "
              placement="top"
            >
              <img
                @click="seeImg(scope.row)"
                style="width: 50px; height: 50px"
                :src="ImgHttps + scope.row.supplierImage.split(',')[0]"
                alt=""
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="商品材质">
          <template slot-scope="scope">
            <div
              v-if="scope.row.prodMaterial"
              style="
                cursor: pointer;
                width: 50px;
                height: 20px;
                overflow: hidden;
              "
              @click="moreProdMaterial(scope.row.prodMaterial)"
            >
              {{ scope.row.prodMaterial }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template
            slot-scope="scope"
            v-if="parArray.indexOf('stopCode') != -1"
          >
            <span
              v-if="scope.row.supplierStatus == 2"
              class="opt"
              @click="stopEvent(scope.row.id, scope.$index)"
              >停用</span
            >
            <span
              v-if="scope.row.supplierStatus == 1"
              style="color: #4168e7; cursor: pointer"
              @click="startUsing(scope.row.id)"
              >启用</span
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 50px"></div>
    <!-- 分页start -->
    <div class="page" v-if="tableData.totalNum >= 10">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tableData.pageNo"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="tableData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.totalNum"
          prev-text="上一页"
          next-text="下一页"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="addFalse"
      :append-to-body="true"
      title="新增供应商"
    >
      <div class="supplier">
        <el-form label-width="80px" label-position="right">
          <el-form-item label="供应商">
            <!-- <el-input v-model="formLabel.supplier"></el-input> -->
            <el-select
              v-model="formLabel.supplier"
              placeholder="请选择供应商"
              clearable
              remote
              allow-create
              :remote-method="remoteSMethod"
              filterable
              @change="supplierSelect"
              default-first-option
            >
              <el-option
                v-for="(item, index) in supplierNames"
                :value="item"
                :label="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="联系人">
            <el-input :maxlength="10" v-model="formLabel.linkName"></el-input>
          </el-form-item>

          <el-form-item label="电话">
            <el-input :maxlength="52" v-model="formLabel.phone"></el-input>
          </el-form-item>

          <el-form-item label="地址">
            <el-input :maxlength="32" v-model="formLabel.address"></el-input>
          </el-form-item>

          <el-form-item label="商品类型">
            <el-select
              v-model="formLabel.type"
              placeholder="请选择商品类型"
              clearable
              @change="onChange"
              default-first-option
            >
              <el-option :value="1" label="商品">商品</el-option>
              <el-option :value="2" label="赠品">赠品</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <!-- <el-input @input="remoteMethod" v-model="searchValue" placeholder="搜索商品名称"></el-input> -->
            <el-select
              :disabled="formLabel.type && formLabel.type.length == 0"
              v-model="formLabel.goodName"
              placeholder="请选择商品名称"
              clearable
              remote
              :remote-method="remoteMethod"
              filterable
              @change="goodNameSelect"
              default-first-option
            >
              <el-option
                v-for="(item, index) in goodNames"
                :value="item"
                :label="item"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌">
            <el-input disabled v-model="formLabel.brand"></el-input>
          </el-form-item>

          <el-form-item label="商品规格">
            <el-input disabled v-model="formLabel.guige"></el-input>
          </el-form-item>

          <el-form-item label="采购单价">
            <el-input-number
              style="width: 100%"
              :max="9999999999"
              :controls="false"
              type="number"
              v-model="formLabel.price"
            ></el-input-number>
          </el-form-item>

          <el-form-item label="商品材质">
            <el-input :maxlength="64" v-model="formLabel.material"></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <el-upload
              class="video"
              ref="upload"
              action="#"
              multiple
              :limit="10"
              :on-exceed="test"
              :before-upload="beforeUploadImg"
              :http-request="imgUpload"
              :file-list="fileListImg"
              :show-file-list="false"
            >
              <i class="el-icon-upload2" style="font-size: 25px"></i>
            </el-upload>
            <div>
              <div
                v-for="(item, index) in fileListImg"
                :key="index"
                style="
                  border: 1px solid #666;
                  display: inline-block;
                  padding: 2px;
                  margin-right: 5px;
                  position: relative;
                "
              >
                <el-image
                  :src="ImgHttps + item.img"
                  style="width: 40px; height: 40px"
                ></el-image>
                <i
                  @click="deleteImg(1, index)"
                  class="el-icon-error"
                  style="
                    position: absolute;
                    top: -4px;
                    right: -6px;
                    background: #fff;
                    cursor: pointer;
                  "
                ></i>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="add">确定 </el-button>
        <el-button size="mini" @click="addFalse = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 分页end -->
    <el-dialog
      :visible.sync="isMoreProdMaterial"
      :append-to-body="true"
      title="材质"
    >
      <div style="display: flex; padding-bottom: 20px">
        <div style="min-width: 80px">材质详情:</div>
        <el-input type="textarea" :rows="2" :value="moreProdMaterialText">
        </el-input>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="isMoreProdMaterial = false">关闭</el-button>
      </span> -->
    </el-dialog>
    <el-dialog
      title="图片查看"
      :visible.sync="dialogVisible"
      :append-to-body="true"
      width="50%"
    >
      <div v-if="moreImg" style="display: flex; flex-wrap: wrap">
        <img
          v-for="item in moreImg.split(',')"
          :key="item"
          :src="ImgHttps + item"
          style="margin-right: 10px; width: 100px; height: 100px"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">关闭</el-button>
      </span>
    </el-dialog>

    <vue-easy-print ref="easyPrint">
      <div style="display: flex; justify-content: center">
        广东九航贸易有限公司
      </div>
      <div style="display: flex; justify-content: center">供应商信息</div>
      <table
        border="1"
        style="text-align: center"
        cellpadding="0"
        cellspacing="0"
      >
        <!-- <tr>
          <th width="5%">序号</th>
          <th width="5%">创建时间</th>
          <th width="7%">创建人姓名</th>
          <th width="7%">供应商姓名</th>
          <th width="5%">联系人</th>
          <th width="5%">电话</th>
          <th width="5%">地址</th>
          <th width="5%">商品类型</th>
          <th width="5%">商品名称</th>
          <th width="5%">商品品牌</th>
          <th width="5%">商品规格</th>
          <th width="5%">商品单价</th>
          <th width="5%">商品材质</th>
        </tr> -->
        <tr>
          <th width="5%">序号</th>
          <th width="5%">创建时间</th>
          <th width="7%">创建人</th>
          <th width="7%">供应商</th>
          <th width="5%">电话</th>
          <th width="5%">地址</th>
          <th width="5%">商品信息</th>
          <th width="5%">商品类型</th>
          <th width="5%">商品品牌</th>
          <th width="5%">采购单价</th>
          <th width="5%">商品规格</th>
          <th width="5%">商品材质</th>
        </tr>
        <!-- 每页显示onePageRow条数据 -->
        <tr v-for="(row, index) in mulvaltipleSelection" :key="index">
          <td>{{ index }}</td>
          <!-----------序号-->
          <td>{{ $moment(row.createdTime) }}</td>
          <!-----------创建时间-->
          <td>{{ row.createdName }}</td>
          <!-----------创建人-->
          <td>{{ row.supplierName }}</td>
          <!-----------供应商-->
          <td>{{ row.supplierPhone }}</td>
          <!-----------电话-->
          <td>{{ row.supplierAddress }}</td>
          <!-----------地址-->
          <td>{{ row.prodName }}</td>
          <!-----------商品信息-->
          <td>{{ row.prodType == 1 ? "商品" : "赠品" }}</td>
          <!-----------商品类型-->
          <td>{{ row.prodBrandName }}</td>
          <!-----------商品品牌-->
          <td>{{ row.prodPrice }}</td>
          <!-----------采购单价-->
          <td>{{ row.prodSpecificationName }}</td>
          <!-----------商品规格-->
          <td>{{ row.prodMaterial }}</td>
          <!-----------商品材质-->
        </tr>
      </table>
    </vue-easy-print>
  </div>
</template>

<script>
import vueEasyPrint from "vue-easy-print";

import * as imageConversion from 'image-conversion';

export default {
  data () {
    return {
      show3: false,
      dialogVisible: false,
      moreImg: "",
      queryForm: {
        info: "",
        goodName: "",
        founder: "",
        address: "",
        brand: "",
        category: "",
        date: "",
      },
      formLabel: {
        supplier: "",
        linkName: "",
        phone: "",
        address: "",
        type: "",
        brand: "",
        guige: "",
        price: "",
        material: "",
        goodName: "",
      },
      addFalse: false, //新增弹框
      pageNo: 1,
      pageSize: 10,
      brandselect: [],
      options: [],
      tableData: [],
      upplier: [],
      mulvaltipleSelection: [],
      parArray: [],
      moreProdMaterialText: "",
      isMoreProdMaterial: false,
      fileListImg: [],
      supplierNames: [],
      goodNames: [],
      multipleSelection: [],
      goodsObj: [],
      specificationList: [],

    };
  },
  components: {
    vueEasyPrint,
  },
  created () {
    // 权限设定判断
    let limits = JSON.parse(sessionStorage.getItem("limit"));
    const params = limits.buttonTreeDto.filter(
      (item) => item.menuCode === "vendorStarted"
    );
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code);
    });
    // 权限设定判断
    this.brandSelectBox();
    this.brandSelect();
    this.listAxios();
    this.upplierAxios();
    this.specificationSelect();

    let _this = this;
    document.onkeydown = function (e) {
      let key = window.event.keyCode;
      if (key == 13) {
        _this.searchEvent();
      }
    };
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null;
    next();
  },
  methods: {
    tpPrintJS () {
      if (this.mulvaltipleSelection.length < 1) {
        this.$message.warning("请选择");
        this.value = "";
        return;
      }
      this.$refs.easyPrint.print();
    },
    //启用
    startUsing (id) {
      this.$confirm("确定要启用吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(({ value }) => {
        this.axios
          .post("order/v1/purchase/supplier/confirmPurchaseSupplier", {
            ids: [id],
            supplierStatus: "2",
          })
          .then((res) => {
            if (res.code == 0) {
              this.$message.success("启用成功");
              this.listAxios();
            } else {
              this.$message.error(res.message);
            }
          });
      });
    },
    //商品规格
    specificationSelect () {
      this.axios.get("/order//comm/commDictonary/list").then((res) => {
        if (res.code == 0) {
          this.specificationList = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    getGoodNames (n) {
      if (this.formLabel.type == "1") {
        this.axios
          .post(
            "/order/comm/commodity/list",
            {
              pageNo: 1,
              pageSize: 200000,
              title: n,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            this.goodsObj = res.data.list;
            this.goodNames = res.data.list.map((item) => item.title);
          });
      } else if (this.formLabel.type == "2") {
        this.axios
          .post(
            "/order/comm/complimentary/list",
            {
              pageNo: 1,
              pageSize: 200000,
              title: n,
            },
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            this.goodsObj = res.data.list;
            this.goodNames = res.data.list.map((item) => item.title);
          });
      } else {
        this.goodNames = [];
      }
    },
    imgUpload (fileObj) {
      let length = this.fileListImg.length;
      let formData = new FormData();
      formData.append("file", fileObj.file);

      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };
      if (length <= 20) {
        this.axios
          .post(
            "/sys/v1/common/upload/files?pathName=internalSystem",
            formData,
            config,
            {
              headers: {
                isLoading: false,
              },
            }
          )
          .then((res) => {
            if (res.code == 0) {
              // this.imageUrl = res.data.url;
              let obj = {
                img: res.data.url,
                creattime: new Date().toLocaleDateString(),
              };
              this.fileListImg.push(obj);
            } else {
              this.$message.error(res.message);
            }
          });
      } else {
        this.$message.warning("图片条数不能超过20条");
      }
    },
    test (file, fileList) {
      this.$message.warning(
        "图片最多10张,现在已上传" + this.fileListImg.length + "张"
      );
    },
    goodNameSelect (e) {
      let goodObj = this.goodsObj.find((res) => res.title == e);
      this.formLabel.goodName = e;
      this.formLabel.brand = this.brandselect.find(
        (res) => (res.name == goodObj.brandId)
      ).name;
      this.formLabel.guige = this.specificationList.find(
        (res) => res.id == goodObj.specificationId
      ).name;
    },
    remoteMethod (e) {
      this.getGoodNames(e);
    },
    /**
    * @name: 选择商品类型触发
    * @test: test font
    * @msg:
    * @param {*} e:回调选择的value
    * @return {*}
    */
    onChange (e) {
      this.formLabel.type = e;
      this.$set(this.formLabel, "goodName", "");
      this.goodNames = [];
    },
    supplierSelect (e) {
      let tempIf = 0;
      if (e.length) {
        if (this.supplierObjs.length) {
          let obj = this.supplierObjs.find((res) => res.supplierName == e);
          this.formLabel = {
            supplier: e,
            linkName: obj.supplierContactPerson,
            phone: obj.supplierPhone,
            address: obj.supplierAddress,
            type: "",
            brand: "",
            guige: "",
            price: "",
            material: "",
            goodName: "",
          };
        } else {
          tempIf = 1;
          this.formLabel.supplier = e;
          this.$message.warning("这个是新创建的!");
        }
      } else {
        tempIf = 1;
      }

      if (tempIf == 1) {
        this.formLabel = {
          supplier: this.formLabel.supplier,
          linkName: "",
          phone: "",
          address: "",
          type: "",
          brand: "",
          guige: "",
          price: "",
          material: "",
          goodName: "",
        };
      }
    },
    remoteSMethod (e) {
      this.axios
        .post("/order/v1/purchase/supplier/purchaseSupplierList", {
          pageNo: 1, //第几页
          pageSize: 20000, //一页多少条
          supplierStatus: 1, //	未确认列表1 或者是 确认列表 2
          supplierName: e,
        })
        .then((res) => {
          this.supplierNames = res.data.list.map((i) => i.supplierName);
          this.supplierObjs = res.data.list;
        });
    },
    beforeUploadImg (file) {
      return new Promise((resolve, reject) => {
        let _URL = window.URL || window.webkitURL;
        let isLt2M = file.size / 1024 / 1024 > 4; // 判定图片大小是否小于4MB
        // 这里需要计算出图片的长宽
        let img = new Image();
        img.onload = function () {
          file.width = img.width; // 获取到width放在了file属性上
          file.height = img.height; // 获取到height放在了file属性上
          let valid = img.width > 10000; // 图片宽度大于2000
          // console.log(11, file)
          // 这里我只判断了图片的宽度,compressAccurately有多个参数时传入对象
          if (valid || isLt2M) {
            imageConversion.compressAccurately(file, {
              size: 400,
              width: 2000,
            })
              .then((res) => {
                // console.log(33, res)
                resolve(res);
                this.$message.success(
                  "成功添加" + this.fileList.length + "张图片"
                );
              });
          } else resolve(file);
        }; // 需要把图片赋值
        img.src = _URL.createObjectURL(file);
      });
    },
    //删除图片
    deleteImg (type, index) {
      if (!this.mulvaltipleSelection.length && !type) {
        this.$message.warning("还没选择哦!");
        return;
      }

      if (type == 1) {
        this.fileListImg.splice(index, 1);
        return;
      }

      this.mulvaltipleSelection.forEach((res) => {
        this.tableData.list.splice(
          this.tableData.list.findIndex((i) => i.id == res.id),
          1
        );
      });
      this.axios
        .post(
          "order/v1/purchase/supplier/delPurchaseSupplier",
          this.mulvaltipleSelection.map((res) => res.id),
          {
            headers: {
              isLoading: false,
            },
          }
        )
        .then((res) => {
          if (res.code == 0) {
            this.listAxios();
            this.$message.success("删除成功");
          } else {
            this.$message.error(res.message);
          }
        });
    },
    add () {
      let data = this.formLabel;
      if (!data.address || !data.brand || !data.goodName || !data.guige || !data.linkName || !data.material || !data.phone || !data.type) {
        this.$message.warning("请填写完整");
        return;
      }
      let prodBrandId = this.brandselect.find(
        (res) => res.name == this.formLabel.brand
      );
      console.log(prodBrandId);
      let prodId = this.goodsObj.find(
        (res) => res.title == this.formLabel.goodName
      );
      let prodSpecificationId = this.specificationList.find(
        (res) => res.name == this.formLabel.guige
      );
      let imgSrc = "";
      this.fileListImg.forEach((res) => {
        imgSrc += res.img + ",";
      });
      this.axios
        .post("/order/v1/purchase/supplier/addPurchaseSupplier", {
          prodBrandId: prodBrandId ? prodBrandId.id : "", //int品牌ID
          prodBrandName: this.formLabel.brand, //str品牌名字
          prodId: prodId ? prodId.id : "", //int商品ID
          prodMaterial: this.formLabel.material, //str商品材质
          prodName: this.formLabel.goodName, //str商品名字
          prodPrice: this.formLabel.price, //number商品单价
          prodSpecificationId: prodSpecificationId
            ? prodSpecificationId.id
            : "", //int商品规格id
          prodSpecificationName: this.formLabel.guige, //str商品规格名字
          prodType: this.formLabel.type, //商品类型(1.商品，2.赠品)
          supplierAddress: this.formLabel.address, //供应商地址
          supplierContactPerson: this.formLabel.linkName, //供应商联系人
          supplierImage: imgSrc.substring(0, imgSrc.length - 1), //供应商图片
          supplierName: this.formLabel.supplier, //供应商名字
          supplierPhone: this.formLabel.phone, //供应商电话
          supplierStatus: "", //供应商状态(不用传)
        })
        .then((res) => {
          if (res.code == 0) {
            this.$message.success("添加成功");
            this.addFalse = false;
            this.formLabel = {
              supplier: "",
              linkName: "",
              phone: "",
              address: "",
              type: "",
              brand: "",
              guige: "",
              price: "",
              material: "",
            };
            this.fileListImg = [];
            this.listAxios();
          } else {
            this.$message.error(res.message);
          }
        });
    },
    exports () {
      this.download(
        "/order/v1/purchase/supplier/supplierExportExcel", this.mulvaltipleSelection.map(res => res.id))
    },
    moreProdMaterial (e) {
      this.moreProdMaterialText = e;
      this.isMoreProdMaterial = true;
    },
    handleSizeChange (e) {
      this.tableData.pageSize = e;
      this.listAxios();
    },
    handleCurrentChange (e) {
      this.tableData.pageNo = e;
      this.listAxios();
    },
    listAxios () {
      let beginTime = "";
      let endTime = "";
      if (this.queryForm.date) {
        beginTime = this.queryForm.date[0] + " 00:00:00";
        endTime = this.queryForm.date[1] + " 23:59:59";
      }
      this.axios
        .post("/order/v1/purchase/supplier/purchaseSupplierList", {
          createdBy: this.queryForm.founder,
          endTime: endTime,
          keyword: this.queryForm.info,
          pageNo: this.tableData.pageNo,
          pageSize: this.tableData.pageSize,
          prodBrandId: this.queryForm.brand,
          prodName: this.queryForm.goodName, //产品名称
          startTime: beginTime,
          supplierAddress: this.queryForm.address,
          supplierStatus: '',
          prodType: this.queryForm.category,
        })
        .then((res) => {
          // console.log(res);
          if (res.code == 0) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    // 创建人下拉框
    upplierAxios () {
      this.axios
        .get("/order/v1/purchase/supplier/supplierCreatedByList")
        .then((res) => {
          if (res.code == 0) {
            this.upplier = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    handleSelectionChange (val) {
      this.mulvaltipleSelection = val;
    },

    // 查看图片
    seeImg (row) {
      if (row.supplierImage.split(',')[0]) {
        this.moreImg = row.supplierImage;
        this.dialogVisible = true;
      }
    },

    reset () {
      this.queryForm = {
        info: "",
        goodName: "",
        founder: "",
        address: "",
        brand: "",
        category: "",
        date: "",
      };
      this.tableData.pageNo = 1;
      this.tableData.pageSize = 10;
      this.listAxios();
    },
    searchEvent () {
      this.tableData.pageNo = 1;
      this.tableData.pageSize = 10;
      this.listAxios();
    },
    // 停用供应商
    stopEvent: _.debounce(function (id, index) {
      let ats = [];
      ats.push(id);
      this.$confirm("确定停用该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios
            .post("/order/v1/purchase/supplier/confirmPurchaseSupplier", {
              ids: ats,
              supplierStatus: 1,
            })
            .then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "停用成功!",
                });
                // this.tableData.list.splice(index, 1);
                this.listAxios();
              } else {
                this.$message.error(res.message);
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }, 300),
    //** 品牌下拉 **//
    brandSelectBox () {
      this.axios.get("/order/comm/commodity/selectList").then((res) => {
        //console.log('分类')
        //console.log(res);
        if (res.code == 0) {
          this.brandselect = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //** 品牌下拉 **//
    // 分类下拉框
    brandSelect () {
      this.axios.get("/order/comm/commodity/selectBrand").then((res) => {
        if (res.code == 0) {
          this.options = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
    },
    addCg () {
      let array = [];
      if (this.mulvaltipleSelection.length > 0) {
        for (let i in this.mulvaltipleSelection) {
          array.push(this.mulvaltipleSelection[i].id);
        }

        this.$router.push({
          name: "purchasingAdd",
          query: {
            ids: JSON.stringify(array),
          },
        });
      } else {
        this.$message.warning("未选择供应商");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.query {
  background: #fff;
  padding: 10px;

  .el-form-item {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 8px;
  }
}

.header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  span {
    font-size: 15px;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}

.selectDate {
  display: inline-block;
  margin-right: 20px;

  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }

  .picker {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }

  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }

  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }

  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}
.btnBox {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  .shows {
    background: #409eff;
    padding: 2px 15px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
  }
}
.btns {
  p {
    background: #409eff;
    padding: 2px 15px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    border-radius: 4px;
    img {
      width: 15px;
      height: 15px;
      display: inline-block;
      vertical-align: middle;
    }
    span {
      font-size: 14px;
      color: #fff;
      display: inline-block;
      vertical-align: middle;
      margin-left: 8px;
    }
  }
}
/deep/.cell {
  color: #333;
}
.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 20px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1000;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
.supplier {
  /deep/.el-form-item__label {
    width: 100px;
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-input,
  /deep/.el-input__inner {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-form-item {
    margin-bottom: 2px;
  }
  /deep/.el-select {
    width: 100%;
    /deep/.el-input__icon {
      height: 30px;
      line-height: 30px;
    }
  }
}
.opt {
  color: rgb(65, 104, 231);
}
.opt:hover {
  cursor: pointer;
}
/deep/.el-dialog__body {
  padding: 0 10px;
}
</style>